<template>
  <view class="content">
    <view class="top-content">
      <view class="back-color">
        <view class="sub-title">欢迎登录</view>
        <view class="title">罗森博格焊接管理平台</view>
      </view>
      <view class="login-box">
        <view class="input-box">
          <input type="text" class="login-input" placeholder-style="font-size: 28rpx; color: #999"
                 placeholder="请输入用户账号" v-model="username">
          <text></text>
        </view>
        <view class="input-box">
          <input :type="ifPassword ? 'password' : 'text'" class="login-input" placeholder-style="font-size: 28rpx; color: #999"
                 placeholder="请输入登录密码" v-model="password">
          <image :src="ifPassword ? '/static/image/common/input/off.png' : '/static/image/common/input/on.png'"
                 @click="changeInputType"></image>
        </view>

        <view class="select-box">
          <image v-if="!select" src="/static/image/login/unselect.png" @click="changeSelect"></image>
          <image v-else src="/static/image/login/select.png" @click="changeSelect"></image>
          <view class="before" @click="changeSelect">已阅读并同意</view>
          <view class="after">《用户隐私协议》</view>
        </view>
        <button type="primary" @click="login">登录</button>
        <view class="bottom-box">
          <view class="face">刷脸登录</view>
          <view class="forget">忘记密码</view>
        </view>
      </view>
    </view>
    <view class="bottom-content">
      <view class="before">有问题？</view>
      <view class="after">立即反馈</view>
    </view>
    <message ref="message"></message>
  </view>
</template>

<script>

  import {login} from "../../api/login/login";
  import {md5} from "../../lib/md5/md5";
	
  export default {
		data() {
			return {
				select: true,
        username: '', // user01
        password: '', // 000000
        ifPassword: true, // 密码框的类型，true为password，false为text
			}
		},
		methods: {
      /**
       * 切换选中
       */
      changeSelect() {
        this.select = !this.select;
      },
      /**
       * 切换密码框的类型
       */
      changeInputType() {
        this.ifPassword = !this.ifPassword;
      },
      /**
       * 登录
       */
      login() {
        // 1.参数校验
        if (!this.username) {
          this.$refs.message.error('用户名不能为空');
          return;
        }
        if (!this.password) {
          this.$refs.message.error('密码不能为空');
          return;
        }
        if (!this.select) {
          this.$refs.message.error("请阅读隐私协议后进行勾选");
          return;
        }
        // 2.准备数据
        let query = {
          username: this.username,
          password: md5(this.password)
        }
        // 3.进行登录
        // uni.redirectTo({
        //   url: '/pages/index/index'
        // })
        // TODO 生产环境要放开下面的代码，注释上面的代码
        login(query).then(res => {
          if (res.data.code === 200) {
            uni.setStorageSync("userId", res.data.data.id);
            uni.setStorageSync("username", res.data.data.name);
            uni.setStorageSync("role", res.data.data.role);
            uni.setStorageSync("company", res.data.data.company);
            uni.setStorageSync("department", res.data.data.department);
            uni.setStorageSync("mobile", res.data.data.mobile);
            uni.setStorageSync("gender", res.data.data.gender);
            uni.setStorageSync("birthday", res.data.data.birthday);
            uni.setStorageSync("loginName", this.username);
            this.$refs.message.success("登录成功");
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/index/index'
              })
            }, 500)
          } else {
            this.$refs.message.error(res.data.info);
          }
        })
      }

		},
		onReady() {
      this.$refs.message.setMessageToStore(this.$refs.message)
		},
    onShow() {
      this.username = uni.getStorageSync("loginName");
    }
	}
</script>

<style scoped lang="scss">
 @import "~@/static/css/login.scss";
</style>
